.SetFront {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;

    &>.FrontTop {
        width: 100%;
        height: 48px;
        background: rgb(56, 58, 71);
        box-shadow: var(--shadow-1-down);
        display: flex;
        align-items: center;
        justify-content: center;

        &>span {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            cursor: pointer;
            filter: drop-shadow(0 0 8px rgba(19, 194, 194, 0));
            transition: all 0.35s;

            &:hover {
                filter: drop-shadow(0 0 8px rgba(19, 194, 194, 1));
            }
        }

        &>.TopNav {
            flex: 1;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            box-shadow: var(--shadow-1-down);

            &>.SetRouter {
                display: flex;
                align-items: center;
                justify-content: flex-start;

                &>.RouterSelect {
                    width: 400px;
                    margin-right: 8px;

                    &>.ant-select-selector {
                        background: transparent;
                        border: none;
                        box-shadow: none;


                        .ant-select-selection-item,
                        .ant-select-selection-search {
                            font-family: ShuHeiTi;
                            font-weight: 600;
                            font-size: 20px;
                            color: #FFFFFF;
                        }

                        .ant-select-selection-placeholder {
                            font-size: 20px;
                            color: #f8f8f8;
                        }
                    }

                    .ant-select-arrow {
                        color: #f8f8f8;
                    }
                }
            }

            &>.size {
                color: #f8f8f8;
                font-size: 20px;
            }

            &>.SetOptions {
                display: flex;
                align-items: center;
                justify-content: center;

                &>span {
                    width: 48px;
                    height: 48px;
                    font-size: 20px;
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }

    }

    &>.FrontBtm {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;

        &>.FrontLeft {
            width: 48px;
            height: 100%;
            background: rgb(47, 49, 60);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            position: relative;
            z-index: 3;
            box-shadow: var(--shadow-1-down);

            &>div {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                position: relative;
                z-index: 1;
                background: rgb(47, 49, 60);

                &>div {
                    &.active {
                        background: #13c2c2;
                        filter: drop-shadow(0 0 8px #13c2c2);

                        &>span {
                            color: #262626;
                            filter: drop-shadow(0 0 8px #262626);
                        }
                    }
                }


                span {
                    width: 48px;
                    height: 48px;
                    font-size: 24px;
                    margin: 8px 0;
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }
            }
        }

        &>.FrontRight {
            flex: 1;
            height: 100%;
            position: relative;
            z-index: 1;
        }



        &>.FrontOptions {
            position: absolute;
            z-index: 2;
            top: 0;
            width: 400px;
            height: 100%;
            background: rgb(53, 56, 69);
            transition: all 0.35s;
            padding: 16px;

            &>.EditWindow {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-direction: column;
                overflow: hidden;

                &>div {
                    width: 100%;

                    &.Options {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 8px;

                        &>button:first-child {
                            flex: 1;
                            margin-right: 16px;
                        }
                    }

                    &.LayerBox {
                        flex: 1;
                    }
                }
            }
        }
    }
}